﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
	<script>

		window.onload = function () {

			// 获取四个多选框
			var items = document.getElementsByName('items');


			/*
				点击全选按钮后，让四个多选框都选中
			 */
			// 为全选按钮绑定一个单击响应函数
			var checkedAllBtn = document.getElementById('checkedAllBtn');
			checkedAllBtn.onclick = function () {
				// 让四个多选框都选中
				// 遍历items
				for(var i=0; i<items.length; i++){
					// 将 items[i] 设置为选中状态
					// 可以通过checked属性来设置选择框的选中状态
					// 如果设置为true，则选择框选中，否则取消
					items[i].checked = true;
				}

				// 将全选全不选设置为true
				checkedAllBox.checked = true;
			};

			//点击全不选按钮，让四个按钮都变成没有选中状态
			// 为id为checkedNoBtn的元素绑定一个单击响应函数
			var checkedNoBtn = document.getElementById('checkedNoBtn');
			checkedNoBtn.onclick = function () {
				for(var i=0; i<items.length; i++){
					//设置items不选中
					items[i].checked = false;
				}

				// 将全选全不选设置为false
				checkedAllBox.checked = false;
			};

			// 点击反选按钮后，选中的变成不选，没选的变成选中
			var checkedRevBtn = document.getElementById('checkedRevBtn');
			checkedRevBtn.onclick = function () {
				// 遍历items
				for(var i=0; i<items.length; i++){
					// 如果items[i] 是选中状态，取消选中，设置checked为false
					// 如果items[i] 是未选中状态，则让它选中，设置checked为true
					// if(items[i].checked){
					// 	items[i].checked = false;
					// }else{
					// 	items[i].checked = true;
					// }
					items[i].checked = !items[i].checked;
				}

				// 根据四个多选框是否全选，来设置全选全不选的状态
				checkedAllBox.checked = [...items].every(a=>a.checked);
			};

			// 提交，单击按钮后，将选中的内容显示出来
			var sendBtn = document.getElementById('sendBtn');
			sendBtn.onclick = function () {
				// 遍历items
				for(var i=0; i<items.length; i++){
					//判断items是否选中，如果选中则打印items
					if(items[i].checked){
						alert(items[i].value);
					}

				}

				// 检查items中是否所有元素都没被选中
				// 检查items中所有元素的checked属性都为false
				// every() 用来检查数组中的每一个元素是否都符合条件
				// some() 用来检查数组中是否有元素符合条件
				// 由于items不是一个数组对象，所以无法使用every() 和 some() 方法
				// 如何将items转换为数组对象

				// 通过对类数组对象解构，将其转换为一个数组对象
				// var itemsArr = [...items];
				// var resutl = itemsArr.every(a=>!a.checked);
				// alert(resutl);
				if([...items].every(a=>!a.checked)){
					// 进入判断证明四个多选框都没选中
					alert('没有多选框被选中！');
				}

			};

			// 使四个多选框和全选全不选的多选框进行同步
			// 为 checkedAllBox 绑定一个单击响应函数
			var checkedAllBox = document.getElementById('checkedAllBox');
			checkedAllBox.onclick = function () {
				// 在事件的响应函数中，this是绑定事件的对象
				// alert(this);

				//遍历items
				for(var i=0; i<items.length; i++){
					// items[i].checked = checkedAllBox.checked;
					items[i].checked = this.checked;
				}
			};

			// 当四个多选框发生变化时，应该改变全选全不选多选框的状态
			// 为四个多选框都绑定单击响应函数
			for(var i=0; i<items.length; i++){
				items[i].onclick = function () {
					// 根据四个多选框是否全选，来设置全选全不选的状态
					checkedAllBox.checked = [...items].every(a=>a.checked);

					// 上述这种方式，虽然好用，但是老版本的IE并不支持
					// 尝试着使用一种可以兼容IE浏览器的方式来完成上述功能
				};
			}

		};



	</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>